<template>
    <div>
        <div class="header">
      <span>
        <label for="label_1">姓名: </label>
        <el-input
            v-model="search_name"
            placeholder="请输入内容"
            style="width: 200px"
            clearable
            id="label_1"
        ></el-input>
      </span>
            <span style="margin-left: 15px">
        <label for="label_2">联系方式: </label>
        <el-input
            v-model="search_phone"
            placeholder="请输入内容"
            style="width: 200px; height: 40px"
            clearable
            id="label_2"
        ></el-input>
      </span>
        <span style="margin-left: 15px">
            时间区间: <DatePicker type="daterange" v-model="search_during_time" placeholder="选择时间" size="large" style="width: 250px"></DatePicker>
        </span>
            <span>
                <el-button type="primary" @click="handelSearch" icon="el-icon-search">查询</el-button>
            </span>
            <span><el-button type="primary" @click="handleAddCustomer">新增</el-button></span>
        </div>
        <div class="content">
            <el-table
                :data="tableData"
                stripe
                style="width: 100%"
                :row-style="{ height: '32px' }"
                :header-row-style="{ height: '10px' }"
                :cell-style="{ padding: '1px' }"
            >
                <el-table-column prop="name" label="姓名" width="100"></el-table-column>
                <el-table-column prop="age" label="年龄" width="80"></el-table-column>
                <el-table-column prop="addr" label="家庭住址"></el-table-column>
                <el-table-column prop="hobby" label="爱好" width="200"></el-table-column>
                <el-table-column prop="phone" label="联系方式" width="150"></el-table-column>
                <el-table-column prop="come" label="客户来源" width="150"></el-table-column>
                <el-table-column prop="next_visit_at" label="下次访问时间" :formatter="handleDateFormatter"></el-table-column>
                <el-table-column  label="操作" width="100">
                    <template slot-scope="scope">
                        <i
                            class="el-icon-edit"
                            @click="handleEdit(scope.$index, scope.row)"
                        ></i>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <i
                            class="el-icon-delete"
                            @click="handleDelete(scope.$index, scope.row)"
                        ></i>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="footer">
            <div class="block">
                <el-pagination
                    @current-change="handleCurrentChange"
                    layout="total, prev, pager, next"
                    background
                    :total="total"
                >
                </el-pagination>
            </div>
        </div>
        <!-- 存放新增组件 -->
        <div v-show="showAdd">
            <AddCustomer ref="addcustomer"></AddCustomer>
        </div>
        <!-- 存放编辑组件 -->
        <div v-show="showEdit">
            <EditCustomer ref="editcustomer"></EditCustomer>
        </div>
    </div>
</template>

<script>
    import AddCustomer from "./AddCustomer";
    import EditCustomer from "./EditCustomer";
    import {dateFormat} from "@/utils/time.js";


    export default {
        name: "CustomerList",
        data() {
            return {
                search_name: "",
                search_phone: "",
                search_during_time: [],
                tableData: [],
                currentPage: 1, // 默认 1
                total: 0,
                showAdd: false,
                showEdit: false,

            };
        },
        methods: {
            handleEdit(index, row) {
                this.showEdit = true;
                this.$refs.editcustomer.handleOpen(row);
            },
            handleDateFormatter(row, column) {
               return dateFormat(row.next_visit_at);

            },
            // 执行删除
            handleDelete(index, row) {
                // console.log(index, row.id);
                this.$confirm("此操作将删除该用户, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(() => {
                    let uid = this.COOKIE.get("uid");
                    this.AXIOS.post(`/api/customer/del/${uid}/${row.id}`)
                        .then((res) => {
                            // console.log(res.data.status);
                            if (res.data.status === 1) {
                                this.$message({
                                    type: "success",
                                    message: "删除成功!",
                                });
                                // 刷新
                                this.handleInitCustomerListData();
                            } else {
                                this.$message({
                                    type: "error",
                                    message: res.data.msg,
                                });
                            }
                        })
                        .then((err) => {
                            console.log(err);
                        });
                });
            },
            // 查询
            handelSearch() {
                let starttime = this.search_during_time[0] === '' ? '' : parseInt(new Date(this.search_during_time[0]).getTime() / 1000);  // 开始时间戳, 毫秒
                let endtime = this.search_during_time[1] === '' ? '' : parseInt(new Date(this.search_during_time[1]).getTime() / 1000);  // 结束时间戳, 毫秒
                let searchCondition = {
                    search_name: this.search_name,
                    search_phone: this.search_phone,
                    search_starttime: starttime,
                    search_endtime: endtime,
                };
                // console.log(searchCondition);
                this.handleInitCustomerListData(1, searchCondition);
            },
            // 分页
            handleCurrentChange(curPage) {
                this.handleInitCustomerListData(curPage);
            },
            // 添加用户界面
            handleAddCustomer() {
                this.showAdd = true;
                this.$refs.addcustomer.handleOpen();  // 调用子组件中的 open() 方法
                // 清空选项中的内容
            },
            // 加载数据
            handleInitCustomerListData(curPage = 1, params = {}) {
                // console.log(curPage);
                params['uid'] = this.COOKIE.get('uid');
                // console.log(params)
                this.AXIOS.get(`/api/customer/list?cur_page=${curPage}`, {params: params})
                    .then((res) => {
                        // console.log(res.data)
                        this.tableData = res.data.data;
                        this.total = res.data.total;
                    })
                    .catch((err) => {
                        console.error(err);
                        this.$message({"type": "error", "message": err})
                    });
            },
        },
        components: {
            AddCustomer,
            EditCustomer
        },

        // 加载页面数据
        mounted() {
            this.handleInitCustomerListData();
        },
    };
</script>

<style scoped>
    .header {
        text-align: left;
        /* font-weight: bold; */
    }

    .content {
        margin-top: 40px;
    }

    .footer {
        position: fixed;
        bottom: 15px;
        left: 200px;
    }
</style>
